<template>
	<view class="myswiper2_box">
		<swiper acceleration class="swiper_lyn" :display-multiple-items="5">
			<swiper-item class="myitem" v-for="(value, name, index) of icons" :key="index">
				<view class="swiper_item">
					<uni-icons :type="value" size="30" color="red"></uni-icons>
					<view class="icon_name">
						{{name}}
					</view>
				</view>
				
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts">
	export default {
		name: "myswiper2",
		data() {
			return {
				icons: {
					'每日推荐': 'calendar-filled',
					'私人漫游': 'home-filled',
					'歌单': 'settings-filled',
					'排行榜': 'fire-filled',
					'有声书': 'wallet-filled',
					'数字专辑': 'circle-filled',
					'直播': 'videocam-filled',
					'关注新歌': 'link',
					'一歌一遇': 'shop-filled',
					'收藏家': 'star-filled',
					'游戏专区': 'map-pin-ellipse'
				}
			};
		}
	}
</script>

<style lang="scss">
	.myswiper2_box {
		margin: 30rpx 25rpx;

		.swiper_lyn {
			height: 140rpx;
			.myitem {
				display: flex;
				text-align: center;
				align-items: center;
				.swiper_item {
					margin-right: 40rpx;
					min-width: 120rpx;
					.icon_name {
						font-size: 12rpx;
					}
				}


			}
		}
	}
</style>